<!--
	学生端课程详情页
-->
<template>
<!-- 最外面这一层是背景色 start -->
<div class="course-info-box">
<!-- 内容层控制了宽度 start -->
<div class="course-info-content" >
	<!-- 页头 start -->
	<div class="page-header">
		<el-page-header @back="this.$router.push({path:'/student/index'})" >
			<template #title>
				<div style="color: #666666; font-size: 17px">返回</div>
			</template>
			<template #content>
				<div style="color: #666666;">{{studentInfoData.thisEditCourse.name}}</div>
			</template>
		</el-page-header>
	</div>
	<!-- 页头 end -->
	<!-- 课程的基础信息 start -->
	<div class="course-base-info">
		<div class="left">
			<img src="@/assets/images/course1.jpg" style="width: 450px;height: 250px;" alt="photo"/>
		</div>
		<div class="right">
			<div class="right-name">
				{{studentInfoData.thisEditCourse.name}}
			</div>
			<div>
				{{studentInfoData.thisEditCourse.syllabus}}
			</div>
		</div>
	</div>
	<!-- 课程的基础信息 end -->
	<div class="student-course-info-content">
		<el-menu
			:default-active="activeIndex"
			router
			mode="horizontal"
			background-color="#F2F6FC"
			text-color="#333333"
			active-text-color="#409EFF"
		>
			<el-menu-item index="1" route="/student/courseInfo/index">
				<template #default>
					<div style="font-size: 15px;font-weight: bold">主页</div>
				</template>
			</el-menu-item>
			<el-menu-item index="2" route="/student/courseInfo/homework">
				<template #default>
					<div style="font-size: 15px;font-weight: bold">任务</div>
				</template>
			</el-menu-item>
			<el-menu-item index="4" route="/student/courseInfo/resource">
				<template #default>
					<div style="font-size: 15px;font-weight: bold">资源</div>
				</template>
			</el-menu-item>
		</el-menu>
	</div>

	<div class="content-router-view">
		<router-view></router-view>
	</div>
</div>
<!-- 内容层控制了宽度 end -->
</div>
<!-- 最外面这一层是背景色 end -->
</template>

<script>
export default {
	name: "StudentCourseInfoIndex",
	data(){
		return {
			/**
			 * 学员登录数据
			 */
			studentInfoData:this.$store.state.studentInfoData,
			activeIndex:"1",
		}
	},

}
</script>

<style lang="scss" scoped>
@mixin wh{
	width: 100%;
	height: 100%;
}
.course-info-box{
	@mixin flexColumn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	@include wh;
	@include flexColumn;
	background: #EEEEEE;
	margin-top: 20px;

	.course-info-content{
		margin: 20px 0 20px 0;
		width: 97%;
		height: 100%;
		@include flexColumn;

		.page-header{
			width: 84%;
			height: 100%;
			margin-bottom: 20px;
		}

		.course-base-info{
			width: 80%;
			height: 100%;
			background: #ffffff;
			display: flex;
			padding: 25px;

			.left{
				// 阴影
				//box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,0.04);
			}

			.right{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin-left: 25px;

				.right-name{
					font-size: 25px;
					font-weight: bold;
				}
			}
		}

		.student-course-info-content{
			width: calc(83% + 5px);
		}

		.content-router-view{
			width: calc(83% + 5px);
			margin-top: 20px;
		}
	}
}
</style>